<template>
  <!-- 分页 -->
  <div class="fr page">
    <div class="sui-pagination clearfix">
      
      <ul>        
        <li :class="{prev:true, disabled:(pageNo == 1)}" @click="previousPage(pageNo-1)"><a>上一页</a></li>

        <li v-if="abc.start > 1" @click="previousPage(1)"><a>1</a></li>
        <li v-if="abc.start> 2"><a>...</a></li>
        <li v-for="(value, index) in abc.end" 
          :key="index" 
          v-if="value >= abc.start" 
          :class="{active: index == pageNo-1}"  
          @click="previousPage(value)"
        ><a>{{value}}</a></li>        
        <li class="dotted" v-if="abc.end < totalPage-1"><span>...</span></li>
        <li><a v-if="abc.end < totalPage" @click="previousPage(totalPage)">{{totalPage}}</a></li>
        <li :class="{next:true, disabled:(pageNo == totalPage)}" @click="previousPage(pageNo+1)"><a>下一页</a></li>
      </ul>
    
    </div>
    
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },    
    abc() {
      let start = 0;
      let end = 0;

      if(this.continues > this.totalPage) {
        start = 1;
        end = this.totalPage;
      }else {
        start = this.pageNo - parseInt(this.continues / 2);
        end = this.pageNo + parseInt(this.continues / 2);

        if(start < 1) {
          start = 1;
          end = this.continues;
        }

        if(end > this.totalPage) {
           
          end = this.totalPage;
          start = this.totalPage + this.totalPage + 1;
          console.log(start)
        }
      }

      return {start, end};
    }
  },
  methods: {
    previousPage(value) {
      if(1 <= value && value <= this.totalPage) {
        this.$emit("getPageNo", value);
      }else {
        console.log("不符合要求")
      }
      
      
    }    
  },
}
</script>

<style scoped>
  /* 页签 */
  .page {
    width: 733px;
    height: 66px;
    overflow: hidden;

    float: right;
  }
  .page .sui-pagination {
    margin: 18px 0;
  }
  .page .sui-pagination ul {    
    margin-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
    /* width: 490px; */
    float: left;
  }
  .page .sui-pagination ul li {
    line-height: 18px;
    display: inline-block;
  }
  .page .sui-pagination ul li a {
    position: relative;
    float: left;
    line-height: 18px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #e0e9ee;
    margin-left: -1px;
    font-size: 14px;
    padding: 9px 18px;
    color: #333;
    cursor:pointer;
  }
  .page .sui-pagination ul .active a{
    background-color: #fff;
    color: #e1251b;
    border-color: #fff;
    cursor: default;
  }
  .page .sui-pagination ul .prev a {
    background-color: #fafafa;
  }
  .page .sui-pagination ul .disabled a {
    color: #999;
    cursor: default;
  }
  .page .sui-pagination ul .dotted span {
    margin-left: -1px;
    position: relative;
    float: left;
    line-height: 18px;
    text-decoration: none;
    background-color: #fff;
    font-size: 14px;
    border: 0;
    padding: 9px 18px;
    color: #333;
  }
  .page .sui-pagination ul .next a {
    background-color: #fafafa;
  }
  .page .sui-pagination div {
    color: #333;
    font-size: 14px;
    float: right;
    width: 241px;
  }
</style>